<template>
  <div class="qr-generator">
    <div class="qr-layout">
      <!-- 左侧表单区 -->
      <div class="qr-form-section">
        <h4 class="section-title">
          <i class="fas fa-user-edit"></i> 个人信息
        </h4>
        <div class="qr-form">
          <div class="form-group">
            <label for="name">姓名 <span class="required">*</span></label>
            <input 
              type="text" 
              id="name"
              v-model="qrForm.name" 
              :class="{ 'error': errors.name }"
              placeholder="请输入真实姓名"
              @blur="validateName"
            />
            <span v-if="errors.name" class="error-message">{{ errors.name }}</span>
          </div>
          
          <div class="form-group">
            <label for="idCard">身份证号 <span class="required">*</span></label>
            <input 
              type="text" 
              id="idCard"
              v-model="qrForm.idCard" 
              :class="{ 'error': errors.idCard }"
              placeholder="请输入18位身份证号"
              @blur="validateIdCard"
              maxlength="18"
            />
            <span v-if="errors.idCard" class="error-message">{{ errors.idCard }}</span>
          </div>
          
          <div class="form-group">
            <label for="phone">手机号 <span class="required">*</span></label>
            <input 
              type="text" 
              id="phone"
              v-model="qrForm.phone" 
              :class="{ 'error': errors.phone }"
              placeholder="请输入11位手机号"
              @blur="validatePhone"
              maxlength="11"
            />
            <span v-if="errors.phone" class="error-message">{{ errors.phone }}</span>
          </div>
          
          <button 
            @click="generateQRCode" 
            class="generate-btn"
            :disabled="!isFormValid"
          >
            <i class="fas fa-magic"></i> 生成二维码
          </button>
        </div>
      </div>
      
      <!-- 右侧预览区 -->
      <div class="qr-preview-section">
        <h4 class="section-title">
          <i class="fas fa-qrcode"></i> {{ qrCodeDataUrl ? '生成的二维码' : '二维码预览' }}
        </h4>
        <div class="qr-result">
          <div class="qr-image-container">
            <div v-if="qrCodeDataUrl" class="qr-image-wrapper">
              <img :src="qrCodeDataUrl" alt="个人信息二维码" class="qr-image" />
              <div class="qr-actions">
                <button @click="downloadQRCode" class="download-btn">
                  <i class="fas fa-download"></i> 下载
                </button>
                <button @click="clearQRCode" class="clear-btn">
                  <i class="fas fa-trash"></i> 清除
                </button>
              </div>
            </div>
            <div v-else class="qr-placeholder">
              <div class="placeholder-icon">
                <i class="fas fa-qrcode"></i>
              </div>
              <p class="placeholder-text">填写信息并点击生成按钮</p>
              <p class="placeholder-subtext">生成您的个人信息二维码</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'QRCodeGenerator',
  data() {
    return {
      // 二维码表单数据
      qrForm: {
        name: '',
        idCard: '',
        phone: ''
      },
      
      // 表单验证错误
      errors: {
        name: '',
        idCard: '',
        phone: ''
      },
      
      // 二维码数据
      qrCodeDataUrl: ''
    }
  },
  computed: {
    // 检查表单是否有效
    isFormValid() {
      return this.qrForm.name.trim() && 
             this.qrForm.idCard.trim() && 
             this.qrForm.phone.trim() &&
             !this.errors.name &&
             !this.errors.idCard &&
             !this.errors.phone
    }
  },
  methods: {
    // 验证姓名
    validateName() {
      const name = this.qrForm.name.trim()
      if (!name) {
        this.errors.name = '请输入姓名'
        return false
      }
      if (name.length < 2) {
        this.errors.name = '姓名至少2个字符'
        return false
      }
      if (name.length > 10) {
        this.errors.name = '姓名不能超过10个字符'
        return false
      }
      if (!/^[\u4e00-\u9fa5a-zA-Z\s]+$/.test(name)) {
        this.errors.name = '姓名只能包含中文、英文和空格'
        return false
      }
      this.errors.name = ''
      return true
    },
    
    // 验证身份证号
    validateIdCard() {
      const idCard = this.qrForm.idCard.trim()
      if (!idCard) {
        this.errors.idCard = '请输入身份证号'
        return false
      }
      if (!/^\d{17}[\dXx]$/.test(idCard)) {
        this.errors.idCard = '请输入正确的18位身份证号'
        return false
      }
      // 简单的身份证校验码验证
      if (!this.validateIdCardChecksum(idCard)) {
        this.errors.idCard = '身份证号校验码错误'
        return false
      }
      this.errors.idCard = ''
      return true
    },
    
    // 验证手机号
    validatePhone() {
      const phone = this.qrForm.phone.trim()
      if (!phone) {
        this.errors.phone = '请输入手机号'
        return false
      }
      if (!/^1[3-9]\d{9}$/.test(phone)) {
        this.errors.phone = '请输入正确的11位手机号'
        return false
      }
      this.errors.phone = ''
      return true
    },
    
    // 身份证校验码验证
    validateIdCardChecksum(idCard) {
      const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
      const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
      
      let sum = 0
      for (let i = 0; i < 17; i++) {
        sum += parseInt(idCard[i]) * weights[i]
      }
      
      const checkCode = checkCodes[sum % 11]
      return idCard[17].toUpperCase() === checkCode
    },
    
    // 生成二维码
    async generateQRCode() {
      if (!this.isFormValid) {
        return
      }
      
      try {
        // 构建个人信息数据
        const personalInfo = {
          name: this.qrForm.name.trim(),
          idCard: this.qrForm.idCard.trim(),
          phone: this.qrForm.phone.trim(),
          timestamp: new Date().toISOString()
        }
        
        // 生成二维码
        this.qrCodeDataUrl = await QRCode.toDataURL(JSON.stringify(personalInfo), {
          width: 256,
          margin: 2,
          color: {
            dark: '#000000',
            light: '#FFFFFF'
          }
        })
      } catch (error) {
        console.error('生成二维码失败:', error)
        alert('生成二维码失败，请重试')
      }
    },
    
    // 下载二维码
    downloadQRCode() {
      if (!this.qrCodeDataUrl) return
      
      const link = document.createElement('a')
      link.download = `个人信息二维码_${this.qrForm.name}_${new Date().toISOString().split('T')[0]}.png`
      link.href = this.qrCodeDataUrl
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    
    // 清除二维码
    clearQRCode() {
      this.qrCodeDataUrl = ''
    }
  }
}
</script>

<style scoped>
.qr-generator {
  background: transparent;
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
}

.qr-layout {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}

.qr-form-section {
  flex: 1.2;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.qr-preview-section {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

/* 移动端响应式布局 */
@media (max-width: 768px) {
  .qr-layout {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .qr-form-section,
  .qr-preview-section {
    flex: none;
    width: 100%;
  }
}

.section-title {
  margin: 0 0 1rem 0;
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.section-title i {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(92, 225, 255, 0.5));
}

.qr-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
  justify-content: space-between;
}

.form-group {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
  color: #e8e8e8;
  text-align: left;
  font-size: 0.9rem;
}

.required {
  color: #97dc99;
}

.form-group input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e0e0e0;
}

.form-group input::placeholder {
  color: #a0a0a0;
  opacity: 1;
}

.form-group input:focus {
  outline: none;
  border-color: #97dc99;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(151, 220, 153, 0.2);
}

.form-group input.error {
  border-color: #97dc99;
}

.error-message {
  display: block;
  color: #97dc99;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.generate-btn {
  width: 100%;
  padding: 0.65rem;
  background: linear-gradient(135deg, #97dc99 0%, #88c057 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  box-shadow: 0 4px 15px rgba(151, 220, 153, 0.3);
}

.generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(151, 220, 153, 0.5);
}

.generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.qr-result {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.qr-image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 350px;
}

.qr-image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.qr-image {
  width: 260px;
  height: 260px;
  border: 3px solid rgba(92, 225, 255, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
}

.qr-image:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-glow-rainbow);
}

.qr-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: 260px;
}

.placeholder-icon {
  font-size: 2.5rem;
  color: #97dc99;
  margin-bottom: 0.8rem;
}

.placeholder-text {
  font-size: 0.95rem;
  color: #e0e0e0;
  margin: 0 0 0.3rem 0;
  font-weight: 500;
}

.placeholder-subtext {
  font-size: 0.85rem;
  color: #97dc99;
  margin: 0;
}

.download-btn, .clear-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.download-btn {
  background: linear-gradient(135deg, #97dc99 0%, #88c057 100%);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(151, 220, 153, 0.3);
}

.download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(151, 220, 153, 0.5);
}

.clear-btn {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.clear-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(108, 117, 125, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .qr-generator {
    padding: 1rem;
  }
  
  .qr-header h3 {
    font-size: 1.1rem;
  }
  
  .qr-actions {
    flex-direction: column;
  }
  
  .download-btn, .clear-btn {
    width: 100%;
    justify-content: center;
  }
}
</style>
